<script setup></script>

<template>
  <div>
    <el-card>
      <div class="main">
        <!-- <div style="display: inline-block; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">1212121212</div> -->
        <el-container>
          <el-aside width="70px">
            <img
              style="width: 60px; height: 60px"
              src="https://img.bosszhipin.com/beijin/mcs/chatphoto/20…82_s.jpg?x-oss-process=image/resize,w_100,limit_0"
              alt=""
            />
          </el-aside>
          <el-main style="padding: 0">
            <div>
              <el-row style="margin-bottom: 10px">
                <el-space>
                  <span style="font-size: 16px">龙湖智慧服务</span>
                </el-space>
              </el-row>
              <el-row style="margin-top: 15px">
                <el-space class="space">
                  <div class="tag">
                    <span>物业管理好</span>
                  </div>
                  <div class="tag">
                    <span>物业管理好好</span>
                  </div>
                  <div class="tag">
                    <span>物业管理好好</span>
                  </div>
                </el-space>
              </el-row>
            </div>
          </el-main>
        </el-container>
      </div>
      <template #footer>
        <el-space :size="size" spacer="|">
          <span style="font-size: 14px">热招</span>
          <span style="font-size: 14px; font-weight: bold; color: #409eff"
            >前端工程师</span
          >
          <span style="font-size: 14px"> 20-40K·14薪</span>
        </el-space>
      </template>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.main {
  display: flex;

  .space {
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;

    .tag {
      max-width: 74px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background-color: #f8f8f8;
      padding: 0 2px;
    }
  }
}
</style>
